import { useRef, useState } from "react";
import { get_image } from "./file";
import { showToast } from 'vant';


function App() {
  // 引用input DOM
  let inp_dom=useRef([])
  // 响应式url
  let [url,setUrl]=useState()

  let load=()=>{
    // 获取上传文件并上传
    let file=inp_dom.current.files[0]
    if(!file){
      showToast('请选择文件')
    }else{
      // 创建formData并添加上传文件
      let formData=new FormData()
      // 追加上传的file到formData中，key为'file'，value为上传的file本身。
      formData.append('file',file)
      // 调用api上传文件
      get_image(formData).then(res=>{
        // 获取api返回的url并设置url
        console.log(res);
        // 上传成功后，alert并设置url
        showToast('上传成功')
        // 注意：此处的url是api返回的url，并未经过本地url转换。
        setUrl(res.data.url)
      })
    }
  }
  return (
    <div className="App">
     <input type="file" ref={inp_dom} onChange={load}/>
     <img src={url} alt=""/>
    </div>
  );
}

export default App;
